<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<p:dataTable var="server" value="#{serverBean.listaServers}"
		resizableColumns="true" styleClass="dataTable">
		<f:facet name="header">Lista de Servidores</f:facet>

		<p:column>
			<f:facet name="header">Servidor</f:facet>
			<div align="center">
				<h:outputText value="#{server.hostName}" />
			</div>
		</p:column>

		<p:column headerText="Porta">
			<div align="center">
				<h:outputText value="#{server.portNumber}" />
			</div>
		</p:column>

		<p:column headerText="Status">
			<h:outputText id="statusDev1" value="#{server.status}" />			
		</p:column>

		<f:facet name="footer">
			<p:button value="Ver Logs" icon="ui-icon-folder-open" onclick="dlg.show(); return false;" />
		</f:facet>
	</p:dataTable>

	<p:dialog header="#{serverBean.currentTab}" widgetVar="dlg" dynamic="true" resizable="false" minimizable="true" height="auto" width="auto">		
	    <p:tree value="#{docController.root}" var="doc" selectionMode="single" selection="#{docController.selectedNode}" animate="true">
	        <p:treeNode expandedIcon="ui-icon-folder-open"
	                    collapsedIcon="ui-icon-folder-collapsed">
	            <h:outputText value="#{doc.title}"/>
	        </p:treeNode>

	        <p:treeNode type="document" icon="ui-icon-document">
	            <h:outputText value="#{doc.title}" />
	        </p:treeNode>

	        <p:treeNode type="picture" icon="ui-icon-image">
	            <h:outputText value="#{doc.title}" />
	        </p:treeNode>

	        <p:treeNode type="mp3" icon="ui-icon-video">
	            <h:outputText value="#{doc.title}" />
	        </p:treeNode>
	    </p:tree>
	</p:dialog>	

	<script type="text/javascript">
		$("td:contains('Online')")
			.empty()
			.prepend('<div align="center"><img class="inline" id="online" src="resources/images/online.png" /></div>');
		$("td:contains('Offline')")
			.empty()
			.prepend('<div align="center"><img class="inline" id="offline" src="resources/images/offline.png" /></div>');
	</script>
</ui:composition>